<template>
  <div class="box">
    <el-tabs v-model="activeName">
      <el-tab-pane label="介绍" name="a1">
        <el-form label-position="top" ref="orderForm" :model="orderFormData" :validate-on-rule-change="false"
          label-width="90px" @submit.native.prevent>
          <el-form-item label="节点标题">
            <el-input v-model="orderFormData.name" placeholder="请输入标题" @input="debounceHandler"
              @keyup.native.enter="debounceHandler"></el-input>
          </el-form-item>

          <el-form-item label="说明">
            <el-input v-model="orderFormData.description" :autosize="{ minRows: 3, maxRows: 4 }" type="textarea"
              placeholder="请输入描述" @input="debounceHandler" @keyup.native.enter="debounceHandler"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="参数" name="a2">

        <div class="items" v-for="(e, i) in param_list" :key="i" v-append="{
          el: e.typeEl,
          options: e
        }">
          <!-- <div v-for="(e, i) in param_list" :key="i"> -->
          <!-- {{ e.type }} -->

        </div>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { debounce, cloneDeep } from "lodash";

import Vue from 'vue';
import lisArray from './components/lisArray'
import lisNumber from './components/lisNumber'
import lisSelect from './components/lisSelect'
import lisCheckbox from './components/lisCheckbox'
import lisText from './components/lisText'
import lisPath from './components/lisPath'
import lisDatabase from './components/lisDatabase'
import lisCode from './components/lisCode'

import defaultTemplate from './components/defaultTemplate'

import { mapState } from 'vuex';

let DefaultController = Vue.extend(defaultTemplate)

export default {
  name: "EditOrder",
  props: ['formData'],
  data() {
    return {
      activeName: 'a2',
      mapVisible: false,
      mode: "",
      orderFormData: {
        name: "",
        description: "",
      },
      param_list: [],
      tabPane: [
        [
          {
            tabId: '0',
            typeEl: new DefaultController(),
            value: '1'
          }
        ]
      ],
      templateMap: {
        "array": Vue.extend(lisArray),
        "number": Vue.extend(lisNumber),
        "select": Vue.extend(lisSelect),
        "checkbox": Vue.extend(lisCheckbox),
        "code": Vue.extend(lisCode),
        "text": Vue.extend(lisText),
        "path": Vue.extend(lisPath),
        "database": Vue.extend(lisDatabase),
      }
    };
  },
  computed: {
    isVisibile: {
      get() {
        return this.dialogVisibleAddOrder;
      },
      set() {
      }
    },
    ...mapState({
      dagStructure: state => state.dag.dagStructure
    })
  },
  watch: {
    // formData(val) {
    //   console.log(val)
    //   this.orderFormData = val
    //   this.getData()
    // }
    formData: {
      handler(val) {
        // let sourForm=this.$options.data.orderFormData;
        // Object.assign(this.orderFormData, val);
        this.orderFormData = val
        this.getData()
        // Object.assign(this.param_list, val.versions[0].param_list)

      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    console.log(this.dagStructure)
  },
  methods: {
    getData() {
      this.param_list = []
      let temp = []
      let canvas_id = this.$route.query.canvas_id
      console.log(this.orderFormData, "orderFormDataorderFormData")
      this.orderFormData.versions[0].param_list.forEach(ele => {
        let Controller = this.templateMap[ele.type]
        // ele.typeEl = new Controller()
        // console.log(ele)
        for (let i in ele) {
          if (ele[i] == 'True') {
            ele[i] = true
          }
          if (ele[i] == 'False') {
            ele[i] = false
          }
        }
        ele.canvas_id = canvas_id
        temp.push({
          type: ele.type,
          content: ele,
          dagStructure: this.dagStructure,
          typeEl: new Controller()
        })
      })
      // this.param_list = val.versions[0].param_list
      // console.log(this.param_list)
      // this.param_list.forEach(item => {
      //   let Controller = this.templateMap[item.type]
      //   console.log(Controller)
      //   item.typeEl = new Controller()
      // })
      setTimeout(() => {
        this.param_list = temp
        console.log(temp, "temptemptemp")
      })
    },
    // 当关闭添加命令弹窗
    onAddOrderDialgClose() {
      const data = this.$options.data();
      this.orderFormData = data.orderFormData;
      this.$emit("cancelorder");
    },
    // 添加行为
    handleAddOrder() {
      this.$refs.orderForm.validate(async (valid) => {
        if (valid) {
          this.$emit("confirmorder", cloneDeep(this.orderFormData));
        } else {
          return false;
        }
      });
    },

    handlerChange() {
      this.$emit("updateCellData", cloneDeep(this.orderFormData));
    },
    debounceHandler: debounce(function () {
      this.handlerChange();
    }, 1000),
  }
};
</script>
<style lang="less" scoped>
// ::v-deep .el-form-item__label {
//   color: #C0C4CC;
// }

// /deep/ .el-tabs__item.is-top {
//   color: #000;
// }

// /deep/ .el-tabs__item.is-top.is-active {
//   color: #409EFF
// }

.items {
  padding: 10px 0;
}

/deep/ .widget-title {
  // color: #000 !important;
}

/deep/ .el-textarea__inner {
  color: #000 !important;
  background: #fffdfd !important;
}

// /deep/ .el-dialog {
//   background: #fff !important;
// }

/deep/ .el-input__inner {
  -webkit-appearance: none !important;
  background-color: #fff !important;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6 !important;
  box-sizing: border-box;
  color: #000 !important;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  width: 100%;
}

/deep/.el-table__body-wrapper,
/deep/.el-table {
  overflow: visible;
}

/deep/.el-table .cell {
  box-sizing: border-box;
  overflow: visible !important;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-left: 10px;
  padding-right: 10px;
}

/deep/ .el-select-dropdown {
  border: none;

  * {
    border: none;
  }
}

/deep/.el-scrollbar .el-select-dropdown__item:hover {
  background: #f5f7fa;
}

/deep/ .el-scrollbar {
  // background: #fff !important;
  color: #000 !important;
  border: none !important;
  z-index: 999999;
}

.body,
html {
  // background: #fff !important;
}

/deep/ .el-input-number .el-input-number__increase {
  background: #f5f7fa !important;
  border-color: #dcdfe6 !important;
}

/deep/ .el-input-number .el-input-number__decrease {
  background: #f5f7fa !important;
  border-color: #dcdfe6 !important;
}

/deep/ .el-input__inner {
  color: #000000 !important;
}

/deep/ .box .el-select-dropdown {
  // background: #fff !important;
  border: none !important;
  color: #000 !important;
}

/deep/ .el-checkbox__label {
  color: #000000 !important;
}

/deep/ .el-input-group__append {
  color: #000 !important;
}

/deep/ .el-input-group__append {
  background: rgba(80, 80, 80, .1) !important;
  border: 0;
  border-radius: 4px;
}

/deep/ .el-form-item__label {
  color: #000 !important;
}
</style>
